import React,{Component} from 'react'
import {Breadcrumb,Button,PageHeader,Form,Row,Col,Input,Table} from 'antd';
import {
    SearchOutlined, DeleteOutlined
    , EditOutlined,TeamOutlined
} from "@ant-design/icons";

import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";

export default class TradeUserList extends Component{
    constructor(props){
        super(props)
        this.state={
            loading: true,
            company_name:this.props.location.state.company_name,
            company_id:this.props.location.state.id,
            list: [],
        }
        this.fetchData();

    }

    fetchData = ()=>{
        console.log(this.state.company_name,this.state.company_id)
    }

    componentWillMount = ()=>{

    }

    //完成
    onSearch = (values) => {
        console.log(values);
        Object.assign(this.state.params, values)
        this.fetchData();
    }

    render(){
        let {company_name,loading,list} = this.state
        const layout = {
            labelCol: {span: 8},
            wrapperCol: {span: 16},
        };

        const columns = [
            {title:"用户名",dataIndex:"username",align:"center"},
            {title:"手机号",dataIndex:"mobile",align:"center"},
            {title:""}
        ];

        return (
            <div style={{padding: '0 0 100px 15px', background: '#fff'}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">同业列表</a>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>{company_name}账号管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <Button type="link" onClick={() => history.go(-1)}>返回</Button>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                    <PageHeader
                        className="site-page-header"
                        title={company_name+"用户管理"}
                        subTitle="账号列表"
                    />
                    <Form
                        rel={this.state.formRef}
                        {...layout}
                        name="basic"
                        onFinish={this.onSearch}
                        onValuesChange={this.onValuesChange}
                    >
                        <Row gutter={16} style={{marginBottom: "10px"}}>
                            <Col className="gutter-row" span={5}>
                                <Form.Item
                                    name={"username"}
                                    label={"账号"}
                                >
                                    <Input placeholder="输入员工账号" allowClear/>
                                </Form.Item>
                            </Col>
                            <Col className="gutter-row">
                                <Button type="primary" htmlType="submit"><SearchOutlined/>查询</Button>
                            </Col>
                        </Row>
                        <Table
                            loading={loading}
                            size="small"
                            columns={columns}
                            rowKey="id"
                            dataSource={list}
                            pagination={true}
                        />
                    </Form>
                </div>
            </div>
        )
    }
}